'use client';

import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react';

import { UnderlineExtension } from './_extensions/under-line';
import StarterKit from '@tiptap/starter-kit';
import CodeBlock from '@tiptap/extension-code-block';
import TaskItem from '@tiptap/extension-task-item'; // 任务列表
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import Document from '@tiptap/extension-document';
import History from '@tiptap/extension-history';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import { FontSizeExtension } from './_extensions/font-size';
import { LineHeightExtension } from './_extensions/line-height';
import TextStyle from '@tiptap/extension-text-style';
import TiptapTable from '@tiptap/extension-table';

import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';
import TableRow from '@tiptap/extension-table-row';

//  other import
import data from './data.json';
import { useEditorStore } from '@/store/useEditorZustand';
import Highlight from '@tiptap/extension-highlight';
import {
  TextBubbleMenu,
  DragHandle,
  CodeContentButton,
  CodeLowLight,
  InsertBlock as CustomBlock,
} from './_component';
import ReactNode from '@/pages/docs/_component/CustomBlock';

function Editor() {
  const { setEditor } = useEditorStore();

  const editor = useEditor({
    autofocus: true, // 让编辑器加载之后自动获得焦点，
    immediatelyRender: false, // 控制编辑器内容渲染方式，false时会等所有拓展加初始化之后再渲染内容。可以解决闪烁问题
    editorProps: {
      attributes: {
        class:
          'focus:outline-none print:border-0 bg-white border border-[#C7C7C7] flex flex-col min-h-[1054px] w-[816px] pt-10 pr-14 pb-10 cursor-text',
      },
    },
    content: data,
    onCreate({ editor }) {
      setEditor(editor);
    },
    onDestroy() {
      setEditor(null);
    },
    onUpdate({ editor }) {
      setEditor(editor);
    },
    onSelectionUpdate({ editor }) {
      setEditor(editor);
    },
    onTransaction({ editor }) {
      setEditor(editor);
    },
    onFocus({ editor }) {
      setEditor(editor);
    },
    onBlur({ editor }) {
      setEditor(editor);
    },
    onContentError({ editor }) {
      setEditor(editor);
    },
    extensions: [
      StarterKit.configure({
        history: false,
      }),
      LineHeightExtension,
      TextStyle,
      UnderlineExtension,
      FontSizeExtension,
      Highlight.configure({
        multicolor: true,
      }),
      CodeBlock.configure({
        HTMLAttributes: {
          style: 'background-color: #282c34; color: #abb2bf;',
        },
      }),
      TaskItem,
      CustomBlock,
      CodeBlockLowlight.extend({
        addNodeView() {
          return ReactNodeViewRenderer(CodeContentButton);
        },
      }).configure({
        lowlight: CodeLowLight,
        defaultLanguage: 'auto',
      }),
      // DragHandle.configure({
      //   tippyOptions: {
      //     placement: 'left',
      //   },
      //   render: () => {
      //     const element = document.createElement('div')

      //     // Use as a hook for CSS to insert an icon
      //     element.classList.add('custom-drag-handle')

      //     return element
      //   },
      // }),
      TiptapTable.configure({ resizable: true, lastColumnResizable: false }),
      TableRow,
      TableHeader,
      // Default TableCell
      TableCell,

      Document,
      Paragraph,
      Text,
      History,
      // 注册自定义节点
      ReactNode,
    ],
  });

  return (
    <div className="size-full overflow-x-auto bg-[#F9FBFD] px-4">
      <div className="flex w-[816px] min-w-max justify-center">
        <EditorContent editor={editor} />
        <TextBubbleMenu />
        <DragHandle />
        {/* <FloatMenu /> */}
      </div>
    </div>
  );
}

export default Editor;
